<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../admin/css/other/console1.css" />

    <title>活动信息</title>
    <style>
      /* 二维码弹窗样式 */
      .el-dialog__body {
        padding: 30px !important;
        /* 增大内边距 */
        background-color: #f9f9f9;
        /* 浅灰色背景提升对比度 */
      }

      #qr-* {
        width: 256px !important;
        height: 256px !important;
        border: 10px solid #ffffff;
        /* 白色边框提升识别率 */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        /* 增强阴影效果 */
        margin: 0 auto 20px;
        /* 居中显示并添加底部间距 */
        display: block;
        /* 确保块级元素 */
      }

      /* 扫码引导样式 */
      .qr-guide {
        color: #d31805;
        font-size: 14px;
        margin-bottom: 15px;
      }

      .qr-guide .el-icon-d-arrow-bottom {
        font-size: 24px;
        display: block;
        margin-bottom: 8px;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="title">
        <div>
          名称<el-input
            v-model="page.value1"
            style="width: 200px; margin: 0 10px"
            placeholder="请输入内容"
          ></el-input>
          <el-button
            icon="Search"
            style="margin: 0; margin-right: 10px"
            @click="check"
            >查询</el-button
          >
          <el-button
            icon="Refresh"
            style="margin: 0; margin-right: 10px"
            @click="reset"
            >重置</el-button
          >
          <el-button
            type="primary"
            icon="CirclePlus"
            style="margin: 0; margin-right: 10px"
            @click="personalAdd"
            plain
            round
            >添加</el-button
          >
          <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" plain round>批量导入</el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" plain round>批量导出</el-button>
        <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" plain round>批量删除</el-button> -->
        </div>
      </div>
      <div class="body">
        <div class="left">
          <el-tree
            style="max-width: 600px"
            default-expand-all
            :expand-on-click-node="false"
            :data="treeData"
            :props="{ label:'Province'}"
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
              </div>
            </template>
          </el-tree>
        </div>
        <div class="right">
          <el-table
            id="table"
            border
            :data-options="JSON.stringify({ 'TableName': 'village_activities','primary_key':'Village_Activity_SerialNumber'})"
            height="450"
            v-loading="loading"
            ref="multipleTable"
            tooltip-effect="dark"
            :data="Tabletdata"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              min-width="180"
              show-overflow-tooltip
              v-for="column in columns"
              :key="column.COLUMN_NAME"
              :prop="column.COLUMN_NAME"
              :label="column.COLUMN_COMMENT"
            >
              <template #scope="scope">
                <div
                  :draggable="true"
                  @dragstart="dragStart(scope.$index)"
                  class="draggable-row"
                >
                  {{ scope.row[column.prop] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              fixed="right"
              align="center"
              label="状态"
            >
              <template v-slot="{row}">
                <el-tag v-if="row.Activity_Sticky=='1'" type="danger"
                  >置顶</el-tag
                >
                <el-tag :type="istype(row).type">{{istype(row).value}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
              <template v-slot="{row}">
                <div style="display: flex; align-items: center">
                  <el-button
                    size="small"
                    style="margin-right: 10px"
                    @click="handlexq(row)"
                    >扫码入会</el-button
                  >
                  <el-dropdown trigger="click">
                    <el-button size="small" type="danger">
                      更多<el-icon class="el-icon--right"
                        ><arrow-down
                      /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="handle2(row)">
                          {{row.Activity_Sticky == '1'?'取消置顶':'置顶'}}
                        </el-dropdown-item>
                        <el-dropdown-item @click="huir(row)">
                          报名人员
                        </el-dropdown-item>
                        <el-dropdown-item @click="canh(row)">
                          手动录入报名人员
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="row.Activity_isEdit == '0'"
                          @click="handleEdit(row)"
                          >编辑</el-dropdown-item
                        >
                        <el-dropdown-item
                          v-else-if="row.Activity_isEdit == '1'"
                          @click="handleEdit1(row)"
                          >会议记录</el-dropdown-item
                        >
                        <el-dropdown-item @click="handleDelete(row)">
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 1%"
            :current-page="page.PageNumber"
            :page-size="page.RowAmount"
            :page-sizes="[10, 100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-dialog v-model="QR_code" title="活动详情" width="350" v-cloak>
        <div style="text-align: center">
          <div class="qr-container">
            <img
              :id="'qr-' + currentActivity?.Party_Organization_Activity_SerialNumber"
              style="width: 256px; height: 256px"
            />
            <div class="qr-guide">
              <i class="el-icon-d-arrow-bottom"></i>
              扫描二维码查看活动详情
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../utils/qrious.js"></script>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
